<template>
  <div class="container" v-if="!loadingStore.loading">
    <star-nav-bar :title="business.name" :right="true" />
    <div class="business-content">
      <div class="photo">
        <img v-if="business.avatar" :src="business.avatar" :alt="business.name" />
      </div>
      <div class="header">
        <img :src="business.avatar" :alt="business.name" />
        <div class="info">
          <div class="name">
            {{ business.name }}
            <span>({{ business.status === 1 ? '营业中' : '已打烊' }})</span>
          </div>
          <div class="phone">联系电话：{{ business.phone ? phoneFormat(business.phone) : '' }}</div>
        </div>
      </div>
      <div class="menu">
        <van-tabs
          v-model:active="tabActive"
          sticky
          :offset-top="navbarHeight"
          class="menu-tab"
          :before-change="beforeChange"
        >
          <van-tab title="点菜">
            <menu-dish
              ref="menuListRef"
              :item-list="menuListData as DishItemResult[]"
              :item-height="itemHeight"
              :start-index="startIndex"
              :end-index="endIndex"
              :visible-count="visibleCount"
              :business="business"
              @getCartList="getCartList"
              @change-start="changeStart"
              @change-end="changeEnd"
            />
          </van-tab>
          <van-tab title="超值套餐">
            <menu-setmeal
              :business="business"
              :item-list="menuListData as SetmealItemResult[]"
              @getCartList="getCartList"
            />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
  <star-loading v-else />
  <!-- 购物车 -->
  <menu-cart :cart-list="cartList" :business="business" v-if="cartList.length !== 0" @get-cartList="getCartList" />
</template>
<script setup lang="ts">
import MenuDish from './components/menu-dish.vue'
import MenuSetmeal from './components/menu-setmeal.vue'
import MenuCart from './components/menu-cart.vue'
import { phoneFormat } from '@/utils/format'
import { getBusinessAPI } from '@/api/business'
import { getCategoryListAPI } from '@/api/category'
import type { BusinessItemResult } from '@/types/business'
import { ref, onMounted, type ComponentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { CategoryItemResult } from '@/types/category'
import type { DishItemResult, SetmealItemResult } from '@/types/meal'
import { getDishListAPI, getSetmealListAPI } from '@/api/meal'
import useCart from './useCart'
import { useloadingStore } from '@/stores/modules/loading'
import { useUserStore } from '@/stores'
const useStore = useUserStore()
const navbarHeight = ref('46px')
const route = useRoute()
const loadingStore = useloadingStore()
// 商家信息
const business = ref({} as BusinessItemResult)
// 分类列表
const categoryList = ref<CategoryItemResult[]>([])
// 菜品列表
// const dishListData = ref<DishItemResult[]>([])
// const setmealListData = ref<SetmealItemResult[]>([])
const menuListData = ref<DishItemResult[] | SetmealItemResult[]>([])
// tab索引
const tabActive = ref(0)
const getBusiness = async () => {
  if (route.query.id) {
    try {
      const { data } = await getBusinessAPI(+route.query.id)
      business.value = data
    } catch (error) {
      console.log(error)
    }
  }
}
// 获取分类列表
// const getCategoryList = async (type?: number) => {
//   const { data } = await getCategoryListAPI(business.value.id, type)
//   categoryList.value = data
// }

// tab切换
const beforeChange = (index: number) => {
  tabActive.value = index
  getMealList()
  // getCategoryList(tabActive.value + 1)
}
// 获取菜品列表
const getMealList = async () => {
  if (route.query.id) {
    // 菜品列表数据
    if (tabActive.value === 0) {
      try {
        const { data } = await getDishListAPI(+route.query.id)
        menuListData.value = [...data]
      } catch (error) {
        console.log(error)
      }
    } else {
      try {
        const { data } = await getSetmealListAPI(+route.query.id)
        menuListData.value = data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
// 购物车
const { cartList, getCartList } = useCart()

// 虚拟列表
const menuListRef = ref<ComponentInstance<typeof MenuDish | typeof MenuSetmeal> | null>(null)
// 当前视口中第一个项的索引
const startIndex = ref(0)
// 当前视口中最后一个项的索引
const endIndex = ref(0)
// 每项高度
const itemHeight = ref(80)
// 虚拟列表一次加载数量
const visibleCount = ref(10)
const changeStart = (value: number) => {
  // console.log('startIndex', value)
  startIndex.value = value
}
const changeEnd = (value: number) => {
  endIndex.value = value
}
onMounted(async () => {
  loadingStore.showLoading()
  await getBusiness()
  await getMealList()
  if (useStore.isLogin) {
    await getCartList(business.value.id)
  }
  loadingStore.hideLoading()
  // await getCartList(business.value.id)
})
</script>
<style scoped lang="scss">
:deep() {
  .van-tabs {
    &__wrap {
      border-radius: 10px 10px 0 0;
    }
    &__line {
      background: #ff0000;
    }
  }
}
.business-content {
  height: calc(100vh - var(--nav-bar-height));
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.photo {
  margin: 10px 10px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    object-fit: cover;
  }
}
.header {
  margin: 0 10px;
  display: flex;
  border-radius: 10px;
  margin-bottom: 10px;
  img {
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  .info {
    margin: 0 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .name {
      display: flex;
      font-weight: 600;
      span {
        font-weight: normal;
      }
    }
    .phone {
      font-size: 14px;
    }
  }
}
.menu {
  flex: 1;
  background: #fff;
  border-radius: 10px 10px 0 0;
  overflow: auto;
  padding-bottom: 60px;
}
</style>
